* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url('./images/spcae\ bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    min-height: 100vh;
}

.box {
    max-width: 1000px; 
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px auto;
    grid-template-rows: auto auto auto auto;
}

header, nav, main, footer {
    border: 3px outset #c0c0c0;
    padding: 20px;
 background: linear-gradient(135deg, #008080 0%, #006666 100%);
    box-shadow: 
        inset 2px 2px 0 rgba(255, 255, 255, 0.5),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        4px 4px 0 rgba(0, 0, 0, 0.3);
    border-radius: 0;
    
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
   background: linear-gradient(135deg, #008080 0%, #006666 100%);
    border: 3px outset #c0c0c0;
}


nav {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
}

nav ul {
    list-style: none;
 
}

nav li {
    padding: 10px 0;
    border-bottom: 2px groove #c0c0c0;
}

nav li:last-child {
    border-bottom: none;
}
..badge-section {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    border: 3px outset #c0c0c0;
    padding: 0;
    background: linear-gradient(135deg, #008080 0%, #006666 100%);
    box-shadow: 
        inset 2px 2px 0 rgba(255, 255, 255, 0.5),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        4px 4px 0 rgba(0, 0, 0, 0.3);
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.badge {
    width: 31px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

.badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.badge-section {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    border: 3px outset #c0c0c0;
    padding: 0;  /* Remove padding */
    background: linear-gradient(135deg, #008080 0%, #006666 100%);
    box-shadow: 
        inset 2px 2px 0 rgba(255, 255, 255, 0.5),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        4px 4px 0 rgba(0, 0, 0, 0.3);
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;  /* No gap between badges */
}

.badge {
    width: 100%;
    height: 88px;  /* Standard web button height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;  /* No borders */
}

.badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;  
    display: block;  
}